<template>
  <el-container>
    <el-header>
      <el-button type="primary" @click="add('新增流程','addNewWork')" style="margin: 10px 0;" size="mini">新增</el-button>
      <el-button type="danger" @click="batchDel"  size="mini">批量删除</el-button>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="流程名">
          <el-input v-model="form.name" placeholder="请输入流程名"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="(item,i) in work.work_state_list"
              :key="i"
              :label="item"
              :value="i">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="(item,i) in work.work_type_list"
                :key="i"
                :label="item"
                :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
          <el-button type="primary" @click="getWorkList">搜索</el-button>
        </el-form-item>
      </el-form>

    </el-header>
    <el-main style="margin-top: 10px;">
  <!--      流程列表-->
      <el-table
        ref="multipleTable"
        :data="work.work_list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="batchHandle">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="ID"
          width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="流程名"
         >
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="desc"
          label="功能描述"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          show-overflow-tooltip>
        </el-table-column>

        <!--操作-->
        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
            </div>


          </template>
        </el-table-column>
      </el-table>
    </el-main>
<!--    分页-->
    <el-footer>
      <div style="margin-top: 20px" class="frow">

        <div class="page">
          <!--分页-->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="work.total">
          </el-pagination>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import {delWork} from "@/apilist/WorkFlow"

export default {
  name: "setWorkflow",
  data(){
    return {
      form:{
        name:'',
        status: '',
        type: '',
        page: 1,
        pagesize:10,
      },


  }},

  computed:{
    ...mapState("Setdata",["work"]),
  },

  methods:{
    ...mapActions("Setdata",["getWorkListAction","getWorkDetailAction"]),
    //新增流程
    add(title,component){
      this.$emit('addTab',title,component,'setWorkflow');
    },

    //搜索流程
    getWorkList(){

      let param = {
        name:this.form.name,
        status:this.form.status,
        page:this.form.page,
        pagesize: this.form.pagesize,
        type: this.form.type,
      };
      this.getWorkListAction(param)
    },
    //批量删除
    batchHandle(){},

    //编辑
    handleEdit(i,row){
      let query = {id:row.id}

      this.getWorkDetailAction(query)
      this.$forceUpdate()
      this.add(row.name,'editWork')
    },

    //删除
    handleDelete(i,row){

        delWork({id: row.id}).then((res) => {
            this.$message({
                type:'success',
                message: res.msg,
                onClose: () => {
                    this.getWorkList()
                }
            })
        });
    },

    //批量处理
    batchDel(){},

    //分页处理
    handleSizeChange(pagesize){this.form.pagesize = pagesize;this.getWorkList();},

    //处理当前分页索引
    handleCurrentChange(page){this.form.page = page;this.getWorkList();},

  },
  mounted() {
  //this.getWorkList();
  }

}
</script>

<style scoped>

</style>
